<template>
    <div>
        <my-footer @change="pagingChange" :count="paging.count" position="center">
            <div slot="header" @keydown.enter="queryUser">
                <el-input placeholder="请输入用户帐号/邮箱/手机号" v-model="query.userName"/>
                <el-input placeholder="请输入邀请码" v-model="query.remark"/>

                <el-button-group>
                    <el-tooltip class="item" effect="dark" content="搜索" placement="top">
                        <el-button type="primary" icon="el-icon-search" @click="queryUser"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button type="primary" icon="el-icon-delete" @click="queryUser"></el-button>
                    </el-tooltip>
                </el-button-group>
            </div>
            <el-table
                    slot="main"
                    :data="tableData"
                    border
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="40">
                </el-table-column>
                <el-table-column
                        type="index"
                        label="*">
                </el-table-column>
                <el-table-column
                        v-for="(item, index) in tableColumn"
                        :key="index"
                        :prop="item.val"
                        :label="item.label">
                </el-table-column>
                <el-table-column
                        label="用户状态"
                        width="215">
                    <template v-slot:default="scope">
                        <el-radio-group v-model="scope.row.state" @change="stateChange(scope.row)" size="small">
                            <el-radio-button label="1">申请</el-radio-button>
                            <el-radio-button label="2">开放</el-radio-button>
                            <el-radio-button label="0">禁止交易</el-radio-button>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="135px">
                    <template v-slot:default="scope">
                        <el-link icon="el-icon-edit">编辑</el-link>
                        <el-link @click="deleteMsg(scope.row.userId)">删除<i class="el-icon-delete el-icon--right"/>
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </my-footer>
    </div>
</template>

<script>
    import myFooter from "../../../components/myFooter";
    import {pagingQuery, updateState, deleteUser} from "@/net/apis/goUser.js";

    export default {
        name: "index",
        components: {
            myFooter
        },
        data() {
            return {
                paging: {
                    limit: 10,
                    page: 0,
                    count: 0
                },
                query: {
                    userName: "",
                    remark: ""
                },
                tableData: [],
                tableColumn: [
                    {val: "userName", label: "真实姓名"},
                    {val: "userAccount", label: "帐号"},
                    {val: "userPhone", label: "手机号"},
                    {val: "userEmail", label: "邮箱"},
                    {val: "lastLogin", label: "最后登录时间"},
                    {val: "loginCount", label: "登录次数"},
                    {val: "invertentStyle", label: "投资风格"},
                    {val: "score", label: "积分"},
                    {val: "creater", label: "创建人"},
                    {val: "remark", label: "邀请码"},
                ]
            }
        },
        methods: {
            pagingChange(page, limit) {
                this.paging.limit = limit;
                this.paging.page = page;
                this.queryUser();
            },
            async queryUser() {
                const pag = this.paging;
                const qu = this.query;
                const result = await pagingQuery(pag.page, pag.limit, qu.userName, qu.remark);
                console.log(result);
                if (result) {
                    this.tableData = result.object.tableData;
                    this.paging.count = result.object.count;
                    this.tableData.filter(item => item.itemState = item.state);
                }
            },
            handleSelectionChange(val) {
                console.log(val);
            },
            stateChange(obj) {
                this.$confirm("是否更新用户状态 ?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(async () => {
                    obj.itemState = obj.state;
                    const result = await updateState(obj.userId, obj.state);
                    if (result) {
                        this.$message({
                            type: result.state === 1 ? "success" : "error",
                            message: result.msg
                        })
                    }
                }).catch(() => {
                    obj.state = obj.itemState;
                });
            },
            deleteMsg(id) {
                this.$confirm("是否删除用户 ?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(async () => {
                    const result = await deleteUser(id);
                    if (result) {
                        this.$message({
                            type: result.state === 1 ? "success" : "error",
                            message: result.msg
                        })
                        if (result.state === 1) {
                            await this.queryUser();
                        }
                    }
                }).catch(() => {
                });
            }
        },
        watch: {},
        mounted() {
            this.queryUser();
        }
    }
</script>

<style scoped>
    .el-input {
        width: 220px;
        margin-right: 15px;
    }

    .el-link {
        margin: 0px 5px;
    }
</style>